<template>
  <div class="list-box" ref="container">
    <p style="text-align: center;color: #A3A9BA;">购买套餐升级体验</p>
    <div class="list-inner">
      <div class="list-item" v-for="(item, index) in items" :key="index" :style="{ width: itemWidth + 'px' }">
        <div class="item-inner" :style="{ padding: gap / 2 + 'px' }">
          <div class="item-wrapper">
            <slot :item="item" :index="index" :width="itemWidth"></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 列表组件
import { onMounted, ref } from "vue";

// eslint-disable-next-line no-undef
const props = defineProps({
  items: {
    type: Array,
    required: true
  },
  gap: {
    type: Number,
    default: 12
  },
  width: {
    type: Number,
    default: 240
  },
  isSize: {
    type: Boolean,
    default: true
  }
});

const container = ref(null)
const itemWidth = ref(props.width)

// onMounted(() => {
//   computeSize()
// })

const computeSize = () => {
  if (!container) return

  const w = container.value.offsetWidth - 10 // 减去滚动条的宽度
  let cols = Math.floor(w / props.width)
  itemWidth.value = Math.floor(w / cols)
}

window.onresize = () => {
  if (props.isSize) {
  } else {
    computeSize()
  }
}
</script>

<style scoped lang="stylus">

.list-box {
  background-color #F7F8FA
  padding 10px 20px
  border-radius 10px

  .list-inner {
    // display flex
    // flex-wrap wrap
    // justify-content space-between
    display grid
    grid-template-columns 1fr 1fr 1fr 1fr 
    gap 30px
    justify-items center
    .list-item {
      background-color #fff
      margin 30px 8px 8px 30px
      padding 8px
      border-radius 10px
      .item-inner { 
        display flex
        .item-wrapper {
          height 100%
          width 100%
          display flex
          justify-content center
        }
      }
    }
  }
}

</style>
<style>
/* .list-inner::after {
  content: '';
  display: block;
  flex: 1 1 auto;
} */
</style>